<template>
  <div class="zb-container">

    <!-- 内容 -->
    <el-container class="body">
      <!-- 树形 -->
      <el-aside width="200px" class="mainaside">
        <div class="user_tree">
          <el-tree
            class="el-tree"
            ref="treeRef"
            :props="treeprops"
            :data="treeDate"
            node-key="fId"
            check-strictly="true"
            @current-change="selectTable"
          />
        </div>
      </el-aside>
      <el-main class="mainmain">
        <!-- 新增按钮及查询 -->
        <div class="firsthe">
          <!-- 模糊查询 -->
          <div class="search">
            <el-input
              v-model="pageData.queryParams.fEquipCode"
              placeholder="请输入编号"
              clearable
              ><template #prepend>编号</template>
            </el-input>

            <el-input
              v-model="pageData.queryParams.fEquipName"
              placeholder="请输入名称"
              clearable
              ><template #prepend>名称</template>
            </el-input>

            <el-button type="primary" plain @click="onHandleSearch"
              >搜索</el-button
            >
            <el-button type="warning" plain @click="onHandleReset"
              >重置</el-button
            >
          </div>
        </div>

        <!-- 主体表格 -->
        <el-row class="row-2">
          <!-- tabel -->
          <el-table
            :data="pageData.tableParams.tableData"
            style="width: 100%"
            border
            v-loading="pageData.tableParams.tableLoading"
            @row-click="clickrow"
          >
            <el-table-column
              fixed
              prop="fProductCode"
              label="编号"
              min-width="120"
            />
            <el-table-column
              prop="fProductName"
              label="名称"
              min-width="120"
            />
            <el-table-column
              prop="fProductAffiliation"
              label="所属单位"
              min-width="120"
            />
            <el-table-column prop="fProductSpec" label="规格" min-width="120" />
            <el-table-column prop="fEcName" label="类别" min-width="120" />
            <el-table-column
              prop="fProductModel"
              label="型号"
              min-width="120"
            />
            <el-table-column
              prop="fProductUnit"
              label="计量单位"
              min-width="120"
            />
            <el-table-column
              prop="fProductionTime"
              label="出厂日期"
              min-width="120"
            />
            <el-table-column
              prop="fPFirstEquipTime"
              label="首次装备日期"
              min-width="120"
            />

            <el-table-column
              prop="fPIsSerial"
              label="序列号管理"
              min-width="120"
            >
              <template #default="{ row }">
                <el-switch v-model="row.fPIsSerial"></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="fPpInfo" label="参数详情" min-width="120" />
            <el-table-column
              prop="fFullName"
              label="录入人员"
              min-width="120"
            />
            <el-table-column
              prop="fCreatorTime"
              label="录入时间"
              min-width="120"
            />
            <el-table-column prop="fState" label="状态">
              <template #="v">
                <span>{{
                  v.row.fState == 0
                    ? "草稿"
                    : v.row.fState == 10
                    ? "审核中"
                    : v.row.fState == 20
                    ? "作废/删除"
                    : "审核通过"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fRemark" label="备注" width="600" />
          </el-table>

          <!-- 分页查询 -->
          <el-col :span="24">
            <el-pagination
              style="margin-top: 20px"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="pageData.tableParams.pageSizeOptions"
              :current-page="pageData.queryParams.page"
              :page-size="pageData.queryParams.pageSize"
              :total="pageData.tableParams.totalCount"
              @current-change="onHandleCurrentChange"
              @size-change="onHandleSizeChange"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-row>
      <el-col :span="24" style="text-align: right; margin-top: 5px">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button type="primary" @click="onHandleSure">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { reactive } from "vue";
import { onMounted, nextTick, reactive, ref, toRefs, computed } from "vue";
import utils from "@/common/utils";
import {  ElMessage } from "element-plus";
import {tree_rk,} from "@/api/apparatusmanage/enterwarehouse"
// equip_rk
export default {
  // components: { edit },

  setup(props,context) {
    onMounted(() => {
      nextTick(getTableData);
      treeList();
      // onHandleCurrentChange()
    });
    const paramTable = ref();

    const pageData = reactive({
      queryParams: {
        fEquipCode: "",
        fEquipName: "",
        page: 1,
        pageSize: 10,
        fPcId: "1",
      },
      tableParams: {
        tableLoading: false,
        tableHeight: 0,
        pageSizeOptions: ["10", "15", "30", "50", "100", "200"],
        totalCount: 0,
        tableData: [],
      },
      currentRow: {},
      isAdd: false,
      multipleSelection: [],
    });

    // 获取树列表
    const treeRef = ref("");
    const treeDate = reactive([]);
    const treeprops = {
      children: "children",
      label: "fEcName",
    };
    const treeList = () => {
      tree_rk().then((res) => {
        console.log("查看装备分类的res:", res.data);
        // treename.push(...res.data);
        treeDate.push(...res.data);
        console.log("查看treeDate:", treeDate);
      });
    };
    function selectTable(res) {
      console.log("tree的res", res);
      pageData.queryParams.fPcId = res.fId;
      getTableData();
    }

    // 分页查询
    const onHandleCurrentChange = (e) => {
      console.log("e", e);
      pageData.queryParams.page = e;
      getTableData();
    };
    const onHandleSizeChange = (e) => {
      pageData.queryParams.page = 1;
      pageData.queryParams.pageSize = e;
      getTableData();
    };
    // 获取参数数据
    const getTableData = () => {
      pageData.currentRow = {};
      pageData.tableParams.tableLoading = true;
      console.log("data222", pageData.queryParams);
      equip_rk(pageData.queryParams) //获取参数信息接口
        .then((res) => {
          console.log("res.data", res.data.list);

          pageData.tableParams.tableData = res.data.list;

          pageData.tableParams.totalCount = res.data.list.length;
          pageData.tableParams.tableLoading = false;
        })
        .catch((error) => {
          ElMessage.error(error.message || "请求出错");
          pageData.tableParams.tableLoading = false;
        });
    };
    // 模糊查询
    const onHandleSearch = () => {
      getTableData();
    };
    // 重置
    const onHandleReset = () => {
      pageData.queryParams.fEquipCode = "";
      pageData.queryParams.fEquipName = "";
      getTableData();
    };
    // 提交
    const onHandleSure = () => {
      if (
        utils.isEmpty(pageData.multipleSelection) ||
        pageData.multipleSelection.length < 1
      ) {
        ElMessage.warning("请选择参数");
        return;
      }
      let arr = [pageData.multipleSelection]
      console.log("arr",arr)
      console.log("arr",arr[arr.length-1].fProductCode)
      const selectObjs = arr.map(p=>{
        

        console.log(p)
        return {
          fEmCode : p.fProductCode,
          fEmName : p.fProductName,
          fEmSpec : p.fProductSpec,
          fEmUnit : p.fProductUnit,
          obj:p
        }
      })
      

      // console.log("pageData.multipleSelection", pageData.multipleSelection);

      // context.emit("ok", pageData.multipleSelection);
      context.emit("ok", selectObjs);
    };
    
    // 点击某一行
    const clickrow = (row)=>{
      // let roww = [row]
      // console.log(roww[0].fId)
      pageData.multipleSelection = row;
      console.log("pageData.multipleSelection",pageData.multipleSelection)
      pageData.currentRow = {};
    }


    return {
      paramTable,
      pageData,
      treeRef,
      treeDate,
      treeList,
      treeprops,
      selectTable,
      onHandleCurrentChange,
      onHandleSizeChange,
      getTableData,
      onHandleSearch,
      onHandleReset,
      clickrow,
      onHandleSure
    };
  },
};
</script>

<style lang="scss" scoped>
.zb-container {
  padding: 0;
  margin: 0;
  .header {
    width: 100%;
    // height: 50px;
    background-color: white;
    // margin: auto;
    // padding-left: 20px;
    text-align: left;
    span {
      line-height: 50px;
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin-left: 20px;
    }
  }

  .body {
    margin-top: 20px;
    background-color: white;
    height: 77vh;
    // 树形下拉框
    .mainaside {
      background-color: rgb(230, 240, 250);
      border-right: 1px solid #ccc;
      .user_tree {
        .el-tree {
          border-bottom: 1px solid #ddd;
        }
      }
    }
    // 内容表格
    .mainmain {
      .firsthe {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .search {
          // width: 250px;
          display: flex;
          align-items: center;

          .el-input {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.el-dialog .el-dialog__header {
  padding: 20px 0;
  padding-left: 20px;
  margin: 0;
  /* padding-bottom: 10px; */
  /* margin-right: 16px; */
  word-break: break-all;
  border-bottom: 1px solid #ddd;
  text-align: left;
  /* margin-left: 20px; */
}

.el-select {
  width: 100%;
  border: none;
  border-radius: 0;
}
.el-select .el-option {
  width: 100%;
  border: none;
  border-radius: 0;
}
</style>
